import './Mars3dSetUp.scss'

import { Button } from 'antd'
import PropTypes from 'prop-types'
import { useRequest } from 'alova'

import { Http } from '../../Api'
import { UseConfigSection } from '../../Template/FormTemplate'


const Mars3DUploadEle = ({ data, Off }) => {
    Mars3DUploadEle.propTypes = { data: PropTypes.object, Off: PropTypes.func }
    const { send } = useRequest(({ data, title }) => Http({ url: 'posCommonJsonInfoByUuid', params: data, path: [`element/${title}`] }), { immediate: false })
    const list = [{ key: 101, uuid: data.uuid, label: '元素名称', type: 'InputTemp', name: 'title' },]

    const onSubmit = () => {
        const { obj, uuid } = data
        send({ data: JSON.stringify(JSON.stringify(obj[uuid])), title: obj[uuid].title }).then(Off)
    }

    return (
        <div className='Mars3dSetUp Mars3DUploadEle'>
            <div className='FormList'>
                {UseConfigSection(data.obj, list)}
            </div>
            <div className='Button'>
                <Button type='primary' danger onClick={Off}>取消</Button>
                <Button type='primary' onClick={onSubmit}>保存</Button>
            </div>
        </div>
    );
};

export default Mars3DUploadEle;